<template>
	<view>
		<view class="order-top uni-row">
			<view class="tab-item1" v-if="role=='s'" v-for="(item,index) in tab1" :key="index" @tap="changetab(index)" :class="{'tab1-active':index==tab_index}">
				{{item}}
			</view>
			<view class="tab-item" v-if="role=='p'" v-for="(item,index) in tab2" :key="index" @tap="changetab(index)" :class="{'tab-active':index==tab_index}">
				{{item}}
			</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view class="order-list">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="kuang" @tap="goinfo" v-for="(item,index) in orderlist" :key="index" :data-id="item.id" style="position: relative;">
				<!-- <image src="../../static/images/shixiao.png" class="shixiao" v-if="item.time==1"></image> -->
				<image src="../../static/images/shixiao.png" class="shixiao" v-if="item.time==1&&(item.order_status==0||item.order_status==3)"></image>
				<view class="border-bottom order-num">
					<image @tap.stop="chooseorder(index)" :src="item.selectimg" v-if="item.order_status==0&&currentTab != 'all'||(item.order_status==3&&role=='s'&&currentTab != 'all')"></image>
					 订单编号：{{item.order_number}}
				</view>
				<view class="uni-row good-item border-bottom" v-for="(it,ind) in item.cartList" :key="ind">
					<view class="order-icon">
						<image :src="it.img"></image>
					</view>
					<view class="order-info">
						<view class="good-name">
							{{it.name}}
						</view>
						<view class="price">
							<text style="font-size: 18rpx;">
								￥
							</text>
							<text>
								{{it.true_price}}
							</text>
							<text style="float: right;">
								×{{it.count}}
							</text>
						</view>
					</view>
				</view>			
			
				<view class="heji-price border-bottom">
					合计：<text style="color: #38D180;font-size: 18rpx;">￥</text><text style="color: #38D180;">{{item.spu_totals}}</text>
				</view>
				<view class="heji-price border-bottom" v-if='item.order_status==0||item.order_status==3'>
					应付：<text style="color: #38D180;font-size: 18rpx;">￥</text><text style="color: #38D180;">{{item.totals}}</text>
				</view>
				<view class="heji-price border-bottom" v-if='item.order_status!=0&&item.order_status!=3'>
				   实付：<text style="color: #38D180;font-size: 18rpx;">￥</text><text style="color: #38D180;">{{item.totals}}</text>
				</view>
				<view class="btn-list">
					<button class="fukuan" @tap.stop="gopingjia(item.id)" v-if="item.order_status==4">评价订单</button>
					<button class="fukuan" v-if="item.order_status==0||item.order_status==3" @tap.stop="payone" :data-id="item.order_number" :data-total="item.totals" :data-time="item.time">立即付款</button>
					<button class="fukuan" v-if="item.order_status==2" @tap.stop="affirm" :data-id="item.id">确认收货</button>
					<button v-if="item.order_status==0" @tap.stop="off" :data-id="item.id">取消订单</button>
					<button v-if="item.order_status==1" open-type="contact" @tap.stop>在线客服</button>
					<button v-if="item.order_status==6">已取消</button>
					<button v-if="item.order_status==5">已评价</button>
					<button v-if="item.order_status==5||item.order_status==6" @tap.stop="del_order" :data-id="item.id">删除</button>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="tab_index==1||(tab_index==4&&role=='s')">
			<view style="position: relative;" class="bottom-view">
				<image @tap="all()" :src="quanxuan.selectimg" class="select" style="position:absolute;top: 30rpx!important;left: 10rpx!important;"></image>
				 <text @tap="all()">全选</text>
				<view class="jiesuan-container ">
					<view class="jiesuan" @tap="paymore()" >结算</view>
					<view class="heji">合计：<text style="color: #38D180;">￥{{sum_total}}</text></view>
				</view>
			</view>
		</view>
		<view style="height: 87rpx;"></view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import { getlogin } from '@/static/js/login.js';
	import { isshangjia } from '@/static/js/login.js';
	export default {
		data() {
			return {
				role: 'p',
				wxinfo_id: '',
				tab1:["全部","待付款","待发货","待收货","货到付","待评价"],
				tab2:["全部","待付款","待发货","待收货","待评价"],
				tab_index:0,
				orderlist:[],
				noshuju:false,
				chekedorder:[],
				quanxuan: { checked: 0, selectimg: '../../static/images/weixuanzhong.png' },
				sum_total:0,
				currentTab:"all",
				order_number:"",
				time:false,
				istijiao:false,
			}
		},
		onShow() {
			this.userinfo = getlogin();
			this.role = isshangjia();
			this.wxinfo_id = this.userinfo.wxinfo_id;
			this.getdata(this.currentTab)
		},
		onLoad() {
			this.userinfo = getlogin();
			this.role = isshangjia();
			this.wxinfo_id = this.userinfo.wxinfo_id;
			this.getdata(this.currentTab)
		},
		methods: {
			paymore(){
				if(this.istijiao){
					console.log("istijiao")
					return false;
				}
				let $this = this;
				if($this.time){
					uni.showModal({
						showCancel:false,
						content:"您限时惠购的商品已经超时了，不能购买了"
					})
					return false;
				}
				var reg=/,$/gi;
				if(this.order_number==""){
					uni.showModal({
						showCancel:false,
						content:"请选择要支付的订单"
					})
					return false;
				}else{
					this.order_number=this.order_number.replace(reg,"");
				}
				uni.request({
					// url: httpPath.filePath+'/index/orderlist/pay',
					url: httpPath.filePath+'/index/moreorder/index',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {wxinfo_id:this.wxinfo_id,openid:this.userinfo.openid,order_number:this.order_number,total_fee:this.sum_total},
					success: (res) => { 
						$this.istijiao=true;
						uni.request({
							// url: httpPath.filePath+'/index/orderlist/pay',
							url: httpPath.filePath+'/wxPay.php/pay',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {wxinfo_id:this.wxinfo_id,openid:this.userinfo.openid,order_number:res.data.data.onlyorder,total_fee:this.sum_total},
							success: (res) => { 
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: res.data.timeStamp,
								    nonceStr: res.data.nonceStr,
								    package: res.data.package,
								    signType: res.data.signType,
								    paySign: res.data.paySign,
								    success: function (res) {
								        uni.showModal({
								        	showCancel:false,
								        	content:"支付成功"
								        })
										if(uni.getStorageSync('sole')){
											uni.removeStorage({
											    key: 'sole',
											    success: function (res) {
											        console.log('success');
											    }
											});
										}
										$this.istijiao=false;
										$this.getdata($this.currentTab)
										$this.quanxuan={checked: 0, selectimg: '../../static/images/weixuanzhong.png'}
								        $this.sum_total=0;
									},
								    fail: function (err) {
								        uni.showModal({
								        	showCancel:false,
								        	content:"支付失败"
								        })
										$this.istijiao=false;
										$this.getdata($this.currentTab)
								    }
								});
							}
						})
					
					}
				});
			},
			/**
			 * 付单个商品
			 */
			payone(e){
				if(this.istijiao){
					console.log("istijiao")
					return false;
				}
				let $this= this;
				let order_id=e.currentTarget.dataset.id;
				let total_fee=e.currentTarget.dataset.total;
				let time=e.currentTarget.dataset.time;
				if(time==1){
					uni.showModal({
						showCancel:false,
						content:"活动已经结束"
					})
					return false;
				}
				uni.request({
					// url: httpPath.filePath+'/index/orderlist/pay',
					url: httpPath.filePath+'/wxPay.php/pay',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {wxinfo_id:this.wxinfo_id,openid:this.userinfo.openid,order_number:order_id,total_fee:total_fee},
					success: (res) => { 
						$this.istijiao=true;
						// if(res.data.code==200){
							uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: res.data.timeStamp,
							    nonceStr: res.data.nonceStr,
							    package: res.data.package,
							    signType: res.data.signType,
							    paySign: res.data.paySign,
							    success: function (res) {
							        uni.showModal({
							        	showCancel:false,
							        	content:"支付成功"
							        })
									if(uni.getStorageSync('sole')){
										uni.removeStorage({
										    key: 'sole',
										    success: function (res) {
										        console.log('success');
										    }
										});
									}
									$this.istijiao=false;
									$this.getdata($this.currentTab)
							    },
							    fail: function (err) {
							        uni.showModal({
							        	showCancel:false,
							        	content:"支付失败"
							        })
									$this.istijiao=false;
									
									$this.getdata($this.currentTab)
							    }
							});
						// }
					}
				});
			},
			phone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			/**
			 *删除订单
			 */
			del_order(e){
				let id=e.currentTarget.dataset.id
				uni.request({
					url: httpPath.filePath+'/index/orderform/delete',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:id},
					success: (res) => {
						if(res.data.code==200){
							uni.showModal({
								showCancel:false,
								content:"删除成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},/**
			 *取消订单
			 */
			off(e){
				let id=e.currentTarget.dataset.id
				uni.request({
					url: httpPath.filePath+'/index/orderform/off',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:id},
					success: (res) => {
						if(res.data.code==200){
							uni.showModal({
								showCancel:false,
								content:"取消成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},/**
			 * 确认收货
			 */
			affirm(e){
				let id=e.currentTarget.dataset.id
				uni.request({
					url: httpPath.filePath+'/index/orderform/affirm',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {id:id},
					success: (res) => {
						if(res.data.code==200){
							
							uni.showModal({
								showCancel:false,
								content:"确认成功"
							})
							this.getdata(this.currentTab)
						}
					},
				})
			},
			/**
			 * 获取总价格
			 */
			gettotal(){
				this.sum_total=0;
				for (let i = 0; i < this.orderlist.length; i++) {
					if(this.orderlist[i].checked == 1){
						this.sum_total += parseFloat(this.orderlist[i].totals) 
					}
				}
			},
			/**
			 * 获取选择的数据
			 */
			getchoosed(){
				this.order_number="";
				for (let i = 0; i < this.orderlist.length; i++) {
					if(this.orderlist[i].checked == 1){
                        this.order_number += this.orderlist[i].order_number+","
						// this.chekedorder.push({id:this.orderlist[i].order_number,true_price:this.orderlist[i].true_price,order_status:this.orderlist[i].order_status})
					}
					if(this.orderlist[i].time==1){
						this.time= true;
					}
				}
			},
			// 判断是否全选
			isall(){
				let isall=true;
				for (let i = 0; i < this.orderlist.length; i++) {
					if(this.orderlist[i].checked ==0){
						isall=false;
					}
				}
				if(isall){
					this.quanxuan={checked: 1, selectimg: '../../static/images/xuanzhong.png' }
				}else{
					this.quanxuan={checked: 0, selectimg: '../../static/images/weixuanzhong.png' }
				}
			},
			/**
			 * 全选
			 */
			all() {
				if (this.orderlist.length != 0) {
					if (this.quanxuan.checked == 0) {
						this.quanxuan.checked = 1;
						this.quanxuan.selectimg="../../static/images/xuanzhong.png";
						for (let i = 0; i < this.orderlist.length; i++) {
							this.orderlist[i].checked = 1;
							this.orderlist[i].selectimg = '../../static/images/xuanzhong.png';
						}
					}else{
						this.quanxuan.checked = 0
						this.quanxuan.selectimg="../../static/images/weixuanzhong.png";
						for (let i = 0; i < this.orderlist.length; i++) {
							this.orderlist[i].checked = 0;
							this.orderlist[i].selectimg = '../../static/images/weixuanzhong.png';
						}
					}
				}
				this.getchoosed();
				this.gettotal();
			},
			/**
			 * 选择订单
			 */
			chooseorder(index){
				
				if (this.orderlist[index].checked == 1) {
					this.orderlist[index].checked = 0;
					this.orderlist[index].selectimg = '../../static/images/weixuanzhong.png';
				} else {
					this.orderlist[index].checked = 1;
					this.orderlist[index].selectimg = '../../static/images/xuanzhong.png';
				}
				this.isall();
				this.getchoosed();
				this.gettotal();
			},
			/**
			 * 拉取订单
			 */
			getdata(currentTab){
				this.orderlist=[];
				uni.request({
					url: httpPath.filePath+'/index/orderform/index',
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {wxinfo_id:this.wxinfo_id,currentTab:currentTab},
					success: (res) => {
						if(res.data.code==200){
							if(res.data.data.info.length!=0){
								
								this.noshuju=false;
								let data= res.data.data.info;
								for(let i=0;i<data.length;i++){
									data[i].checked=0;
									data[i].selectimg="../../static/images/weixuanzhong.png";
									// data[i].cartList=JSON.parse(data[i].cartList);
								}
								this.orderlist=data;
							}else{
								this.noshuju=true;
							}
						}
					}
				});
			},
			changetab(index){
				this.tab_index=index;
				
				if(index==0){
					this.currentTab="all"
				}else if(index==1){
					this.currentTab=0;// 0.待付款
					
				}else if(index==2){
					this.currentTab=1;//1待发货
				}else if(index==3){
					this.currentTab=2;// 2.待收货
				}else if(index==4){
					if(this.role=='p'){
						this.currentTab=4;
					}else{
						this.currentTab=3;// 3.货到付款
					}	
				}else{
					this.currentTab=4
				}
				
				this.getdata(this.currentTab)
			},gopingjia(id){
				uni.navigateTo({
					url:"pingjia?id="+id
				})
			},goinfo(e){
				
				uni.navigateTo({
					url:"orderinfo?id="+e.currentTarget.dataset.id
				})
			}
		}
	}
</script>

<style>
	
	page{background: #f9f9f9;}
	.shixiao{position: absolute;top: 0rpx;right: 0rpx;width: 100rpx;height: 100rpx;z-index: 0;}
    .order-top{width: 100%;background: #333333;height:85rpx;position: fixed;top: 0px;left: 0px;z-index: 100;}
	.tab-item{width: 20%;position: relative;font-size: 30rpx;color: #666666;text-align: center;height:85rpx;line-height: 85rpx;}
	.tab-item1{width: 16.6%;position: relative;font-size: 30rpx;color: #666666;text-align: center;height:85rpx;line-height: 85rpx;}
	.tab-active{color: #FFFFFF;font-weight: bold;}
	.tab1-active{color: #FFFFFF;font-weight: bold;}
	.tab-active::after{content: "";display: block;width: 98rpx;height: 2px;position: absolute;bottom: 0rpx;left: 28rpx;background: #7ADBA8;}
	.tab1-active::after{content: "";display: block;width: 98rpx;height: 2px;position: absolute;bottom: 0rpx;left: 14rpx;background: #7ADBA8;}
	
	.order-num{height: 60rpx;line-height: 60rpx;font-size: 28rpx;}
	.good-item{padding: 20rpx 0px;}
	.order-icon{width:142rpx ;height:142rpx ;border-radius: 5px;border: 1px solid #F2F2F2;margin-right: 24rpx;}
	.order-icon image{width: 100%;height: 100%;border-radius: 5px;}
	.order-info{width:430rpx;}
	.good-name{
	    height: 75rpx;font-size: 28rpx;color: #333;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical; 
	    -webkit-line-clamp: 2; 
	    line-height: 38rpx;
	}
	.order-list{margin-top: 30rpx;}
	.price{font-size: 28rpx;margin-top: 25rpx;}
	.heji-price{font-size: 28rpx;text-align: right;line-height: 86rpx;}
	.btn-list::after{content: "";display: block;clear: both;}
	.btn-list button::after{border: none;}
	.btn-list button{width: 144rpx;color: #333333;border-radius: 5px;border: 1px solid #333333;background: #FFFFFF;font-size: 28rpx;padding: 0px;margin-top: 15rpx;float: right;margin-left: 20rpx;}
    .fukuan{color: #FFFFFF!important;background:linear-gradient(-45deg,rgba(56,209,128,0.96),rgba(154,255,221,0.96))!important;border: none!important;}
    .order-num image{width: 36rpx;height: 36rpx;margin-right: 20rpx;vertical-align: middle;}
	.bottom{position: fixed;bottom: 0px;left: 0px;width: 100%;height: 90rpx;background: #FFFFFF;border-top: 1px solid #F2F2F2;}
	.bottom-view{padding-left: 50rpx;width: 100%;height: 90rpx;line-height: 90rpx;font-weight:500;color:rgba(102,102,102,1);font-size: 28rpx;box-sizing: border-box;}
	.bottom-view .select{left: 32rpx;top: 33rpx;}
	.jiesuan-container{width: 60%;float: right;padding-right: 32rpx;height: 90rpx;}
	.jiesuan{width: 150rpx;height: 60rpx;border-radius: 30rpx;margin-top:15rpx ;
	float: right;font-size: ;color: #FFFFFF;line-height: 60rpx;text-align: center;
	background:linear-gradient(-45deg,rgba(56,209,128,0.96),rgba(154,255,221,0.96));
	}
	.heji{text-align: right;padding-right: 10rpx;float: right;}
	.select{width:36rpx ;height: 36rpx;}
</style>
